<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @select="handleParentSelect"
      @select-all="handleParentSelectAll"
      @selection-change="handleParentSelectionChange"
      ref="parentTable"
      @row-click="handleParentRowClick"
      @expand-change="handleParentExpandChange"
    >
      <el-table-column type="selection" width="55">
        <template #default="{ row }">
          <el-checkbox
            :indeterminate="row.indeterminate"
            @change="toggleParentSelection(row, $event)"
            v-model="row.checked"
          />
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template #default="scope">
          <el-table
            :data="scope.row.childTableData"
            :ref="'childTable' + scope.row.id"
            @select="handleChildSelect($event, scope.row)"
            @select-all="handleChildSelectAll($event, scope.row)"
            @selection-change="handleChildSelectionChange($event, scope.row)"
            @row-click="handleChildRowClick($event, scope.row)"
            @expand-change="handleChildExpandChange($event, scope.row)"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="项目" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          childTableData: [{ name: '项目A' }, { name: '项目B' }],
          checked: false,
          indeterminate: false
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          childTableData: [{ name: '项目C' }],
          checked: false,
          indeterminate: false
        }
      ],
      selectedData: []
    }
  },
  methods: {
    // 父表全选
    handleParentSelectAll(selection) {
      console.log('selection', selection)
      for (const item of this.tableData) {
        item.checked = selection.length == 0 ? false : true
        // 改变子表的勾选状态
        this.$nextTick(() => {
          let childTableRef = this.$refs['childTable' + item.id]
          // 子表是否存在
          if (childTableRef) {
            // 切换子表勾选状态
            childTableRef.toggleAllSelection()
          }
        })
      }
    },
    // 父表勾选
    handleParentSelect(selection, row) {
      console.log(selection, row)
      this.$nextTick(() => {
        let childTableRef = this.$refs['childTable' + row.id]
        console.log('childTableRef', childTableRef)
        // 子表是否存在
        if (childTableRef) {
          // 切换子表勾选状态
          childTableRef.toggleAllSelection()
        }
      })
    },
    // 父表checkbox勾选
    toggleParentSelection(row, value) {
      console.log('row, index', row, value)
      if (value) {
        this.$refs.parentTable.toggleRowSelection(row, true)
      } else {
        this.$refs.parentTable.toggleRowSelection(row, false)
      }
    },
    // 父表点击当前行
    handleParentRowClick(row) {
      this.$nextTick(() => {
        let childTableRef = this.$refs['childTable' + row.id]
        if (childTableRef) {
          childTableRef.toggleAllSelection()
        }
      })
    },
    // 父表勾选变化
    handleParentSelectionChange(selection) {
      this.selectedData = JSON.parse(JSON.stringify(selection))
    },
    // 父表展开变化
    handleParentExpandChange(row, expanded) {
      console.log('handleParentExpandChange', row, expanded)
      if (expanded) {
        let findIndex = this.selectedData.findIndex((item) => item.id === row.id)
        if (findIndex > -1) {
          this.$nextTick(() => {
            let childTableRef = this.$refs['childTable' + row.id]
            if (childTableRef) {
              childTableRef.toggleAllSelection()
            }
          })
        }
      }
    },

    // 子表全选
    handleChildSelectAll(selection, scopeRow) {},
    // 子表勾选
    handleChildSelect(selection) {},
    // 子表点击当前行
    handleChildRowClick(row, scopeRow) {
      console.log('row')
      row.expanded = !row.expanded
      this.$refs['childTable' + scopeRow.id].toggleRowSelection(row, row.expanded)
    },
    // 子表勾选变化
    handleChildSelectionChange(selection, scopeRow) {
      console.log('selection 勾选', selection, scopeRow.childTableData.length)
      // 将对应的childTableData勾选数据替换
      let findIndex = this.selectedData.findIndex((item) => item.id === scopeRow.id)
      // 如果勾选为空，则取消父表勾选
      if (selection.length === 0) {
        this.$refs.parentTable.toggleRowSelection(scopeRow, false)
        scopeRow.checked = false
        scopeRow.indeterminate = false
      } else if (selection.length === scopeRow.childTableData.length) {
        // 如果全选，则勾选父表
        this.$refs.parentTable.toggleRowSelection(scopeRow, true)
        scopeRow.checked = true
        scopeRow.indeterminate = false
        if (findIndex > -1) {
          this.selectedData[findIndex].childTableData = JSON.parse(JSON.stringify(selection))
        }
      } else {
        // 如果半选，将父表状态改为不确定indeterminate
        scopeRow.checked = true
        scopeRow.indeterminate = true
        console.log('---selection', selection)
        // 将对应的childTableData勾选数据替换
        if (findIndex > -1) {
          this.selectedData[findIndex].childTableData = JSON.parse(JSON.stringify(selection))
        } else {
          this.selectedData.push({
            ...scopeRow,
            childTableData: JSON.parse(JSON.stringify(selection))
          })
        }
      }
    }
  }
}
</script>
